import {  Button, Card, Image,Tooltip } from "antd"
import Title from "antd/es/typography/Title"
import { useEffect, useState } from "react"
import "../../pages/product/product.css"

export const HptProduct = () => {
    const [productData, set_productData] = useState([])
    useEffect(() => {
        set_productData([{
            id: 1,
            name: "推拿按摩",
            category: "理疗项目",
            categoryType: "treatment",
            price: 188.00,

            description: "60分钟专业推拿，缓解肌肉疲劳，疏通经络，促进血液循环。适合长期办公族、颈椎腰椎不适人群。",
            duration: 60,
            master: "all",
            masterName: "全部员工",
            effect: "缓解疲劳、疏通经络、促进血液循环",
            attention: "孕妇慎用，饭后1小时内不宜进行，皮肤有破损者不宜进行",
            mainImage: "https://picsum.photos/id/133/600/400",
            images: [
                "https://picsum.photos/id/134/600/400",
                "https://picsum.photos/id/135/600/400"
            ],
            status: "active",
            sort: 80,
            sales: 356,
            remarks: "需提前1天预约，周末及节假日价格上浮20%"
        },
        {
            id: 2,
            name: "针灸治疗",
            category: "理疗项目",
            categoryType: "treatment",
            price: 268.00,
            description: "专业员工针灸，调理身体机能，针对特定穴位进行治疗，效果显著。",
            duration: 45,
            master: "li,chen",
            masterName: "李员工、陈员工",
            effect: "止痛、调节内分泌、改善睡眠",
            attention: "孕妇禁用，有出血倾向者禁用，皮肤感染者禁用",
            mainImage: "https://picsum.photos/id/225/600/400",
            images: [
                "https://picsum.photos/id/226/600/400",
                "https://picsum.photos/id/227/600/400"
            ],
            status: "active",
            sort: 75,
            sales: 245,
            remarks: "需提前2天预约，治疗后24小时内避免洗澡"
        },
        {
            id: 3,
            name: "艾草精油",
            category: "中药产品",
            categoryType: "medicine",
            price: 88.00,

            description: "纯天然艾草提取，适合按摩使用，具有温经散寒、活血通络的功效。",
            stock: 42,
            unit: "瓶",
            origin: "河南南阳",
            expiry: 365,
            mainImage: "https://picsum.photos/id/106/600/400",
            images: [
                "https://picsum.photos/id/107/600/400",
                "https://picsum.photos/id/108/600/400"
            ],
            status: "active",
            sort: 60,
            sales: 156,
            remarks: "每瓶100ml，配合推拿效果更佳"
        },
        {
            id: 4,
            name: "颈椎按摩器",
            category: "养生器材",
            categoryType: "equipment",
            price: 399.00,

            description: "家用便携式，缓解颈椎疲劳，3种按摩模式，智能定时功能。",
            stock: 18,
            unit: "台",
            origin: "广东深圳",
            expiry: null,
            mainImage: "https://picsum.photos/id/118/600/400",
            images: [
                "https://picsum.photos/id/119/600/400",
                "https://picsum.photos/id/120/600/400"
            ],
            status: "active",
            sort: 50,
            sales: 67,
            remarks: "保修期1年，需使用USB充电"
        }])
    }, [])
    return <>
        <div>
            <div className="flex justify-between items-center mb-4">
                <Title level={3} className="text-secondary">热销产品</Title>
            </div>
            <div style={{ display: "flex", gap: 20 }}>

                {productData.map((product) => (
                    <div style={{ width: "40%" }}>
                        <Card
                            
                        >
                            <div style={{ position: "relative" }}>
                                <Image
                                    alt={product.name}
                                    src={product.mainImage}
                                    preview={false}
                                    style={{ borderRadius: 6 }}
                                />
                                <div className="hot-title">热销</div>
                            </div>
                            <Card.Meta
                                title={
                                    <div style={{ display: "flex", justifyContent: "space-between", marginTop: 10 }}>
                                        <span>{product.name}</span>
                                        <span className="text-primary font-bold" style={{ color: "#8B5A32" }}>¥{product.price ? product.price.toFixed(2) : 0}</span>
                                    </div>
                                }
                                description={
                                    <>
                                        <label type="secondary" style={{ fontSize: "13px" }} className="text-sm">
                                            <Tooltip title={product.description}>
                                                {product.description.length > 30
                                                    ? `${product.description.slice(0, 30)}...`
                                                    : product.description}
                                            </Tooltip>

                                        </label>
                                        <div style={{ display: "flex", justifyContent: "space-between" }}>

                                            <label>
                                                销量:  ({product.sales})
                                            </label>
                                            <Button


                                                size="small"
                                                className="text-sm cursor-pointer hover:underline mt-2 inline-block"
                                                onClick={() => handleEdit(product.id)}
                                            >
                                                编辑
                                            </Button>
                                        </div>

                                    </>
                                }
                            />
                        </Card>

                    </div>
                ))}
            </div>


        </div>
    </>
}